@import '../../css/colors.css';
@import '../../css/units.css';
@import '../../css/z-index.css';

.menu-Bar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;

	/*
        For most things, we shouldn't explicitly set height, and let the
        content push the element to whatever fits. Using a fixed height
        instead, will help us subtract the value we assign from the body,
        adding up to a perfect 100%. This means we don't need to set
        overflow: hidden, which makes it hard to debug. border-box
        simplifies by all of this by removing padding from the equation.
    */
	box-sizing: border-box;
	height: $menu-bar-height;

	/*
        @todo: This adds ~20px in Chrome, when scrolling to the right,
        but fixes [FFx + Safari] [resize window down + scroll to the right] bug.
        width: 100%;
    */
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: $menu-bar-standard-font-size;
	font-weight: bold;
	background-color: $motion-primary;
	color: $ui-white;
}

.main-menu {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: nowrap;
	align-items: center;
	flex-grow: 1;
}

.scratch-logo {
	height: 2rem;
	vertical-align: middle;
	background-color: #ffffff;
}

.scratch-logo.clickable {
	cursor: pointer;
}

.language-icon {
	height: 1.5rem;
	vertical-align: middle;
}

.language-caret {
	margin: 0 0.125rem;
}

.language-menu {
	box-sizing: border-box;
	display: inline-flex;
	width: $language-selector-width;
}

.menu-bar-item {
	display: flex;
	padding: 0 0.25rem;
	text-decoration: none;
	color: $ui-white;
	user-select: none;
	align-self: center;
	position: relative;
	align-items: center;
	white-space: nowrap;
	height: $menu-bar-height;
}

.menu-bar-item.hoverable {
	cursor: pointer;
}
.menu-bar-item.disabled {
	color: #bbb;
}
.menu-bar-item.active,
.menu-bar-item.hoverable:hover {
	background-color: $ui-black-transparent;
}

.menu-bar-item.growable {
	max-width: $menu-bar-item-max-width;
	flex: 1;
}

.title-field-growable {
	flex-grow: 1;
	width: 2rem;
}

.file-group {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.file-group .menu-bar-item {
	padding: 0 0.75rem;
}

.menu-bar-item.language-menu {
	padding: 0 0.5rem;
}

.menu-bar-menu {
	margin-top: $menu-bar-height;
	z-index: $z-index-menu-bar;
}

.feedback-link {
	color: $motion-primary;
	text-decoration: none;
}

.feedback-button {
	background-color: $ui-white;
	height: 34px;
}

.divider {
	margin: 0 0.5rem;
	height: 34px;
}

.author-info {
	margin-left: 0.25rem;
	margin-right: 0.6875rem;
}

.menu-bar-button {
	height: $menu-bar-button-size;
}

.share-button {
	background: $pen-primary;
}

.share-button-is-shared {
	background: $ui-black-transparent;
}

.saveProjectButton {
	background-color: $data-primary;
}
.remix-button {
	background-color: $pen-primary;
}

.remix-button-icon {
	height: 1.25rem;
}

.inline-message {
	color: $ui-white;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	font-size: 0.8125rem;
	margin-left: 5px;
}

.coming-soon > :not(.coming-soon-tooltip) {
	opacity: 0.5;
}

.account-info-group {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.account-info-group .menu-bar-item {
	padding: 0 0.75rem;
}

.mystuff-icon {
	margin: 0 0.25rem;
	height: 1rem;
}

.help-icon {
	margin-right: 0.35rem;
}

.account-nav-menu,
.mystuff-button {
	padding: 0 0.25rem;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.profile-icon {
	margin: 0 0.25rem;
	width: $menu-bar-button-size;
	border-radius: $form-radius;
}

.dropdown-caret-icon {
	width: 0.5rem;
	height: 0.5rem;
}

[dir='ltr'] .dropdown-caret-icon {
	margin-left: 0.5rem;
}

[dir='rtl'] .dropdown-caret-icon {
	margin-right: 0.5rem;
}

.disabled {
	opacity: 0.5;
}

.mystuff > a {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 45%;
	padding-right: 10px;
	padding-left: 10px;
	width: 30px;
	overflow: hidden;
	text-indent: 50px;
	white-space: nowrap;
}
.mystuff > a:hover {
	background-size: 50%;
}

.mystuff > a {
	background-image: url('/images/mystuff.png');
}

.about-icon {
	height: 1.25rem;
	margin: 0.5rem;
	vertical-align: middle;
}
